<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!--使用最新的IE浏览器进行渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视窗的配置-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    
    	<title>麦子学院</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!--需要覆盖bootstrap原来的样式-->
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <!--动画-->
    <link rel="stylesheet" type="text/css" href="css/animate.css"/>
  </head>
  <body>
	
	<!--顶部导航-->
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<!--小屏幕导航按钮和logo-->
				<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a href="index.html" class="navbar-brand">麦子学院</a>
			</div>

			<!--导航-->
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#home">首页</a></li>
					<li><a href="#bbs">论坛</a></li>
					<li><a href="#html5">前端开发</a></li>
					<li><a href="#course">最新课程</a></li>
					<li><a href="#app">移动APP</a></li>
					<li><a href="#contact">联系我们</a></li>
				</ul>
			</div>
		</div>
	</nav>
	
	<!--	home 使用html5标签-->
	<section id="home">
		<div class="lvjing">
			<div class="container">
				<div class="row wow bounceInLeft">
					<div class="col-md-1"></div>
					<div class="col-md-10">	
						<h3>bootstrap课程等你来战</h3>
						<p>课程介绍</p>
						<img src="img/php.jpg" class="img-responsive" alt="php"/>
					</div>
					<div class="col-md-1"></div>
				</div>
			</div>
		</div>
	</section>
	<!--	home-->
	
	<!--	bbs论坛-->
	<section id="bbs">
		<div class="container">
			<div class="row">
				<div class="col-md-4 ">
					<a href="https://www.baidu.com">
						<img src="img/a.png" align="" class="img-responsive"/>
						<h3>安卓开发</h3>
						<p>安卓交流</p>
					</a>
				</div>
				<div class="col-md-4 ">
					<a href="https://www.baidu.com">
						<img src="img/i.png"align="" class="img-responsive"/>
						<h3>iOS开发</h3>
						<p>iOS开发交流</p>
					</a>
				</div>
				<div class="col-md-4">
					<a href="https://www.baidu.com">
						<img src="img/b.png"align="" class="img-responsive"/>
						<h3>嵌入式开发</h3>
						<p>嵌入式交流</p>
					</a>
				</div>
			</div>
		</div>
	</section>
	<!--	bbs-->

	<!--	html5 -->
	<section id="html5">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<h2>HTML5前端开发</h2>
					<p>一线资深工程是打造</p>
					<p><span class="glyphicon glyphicon-grain mai-icon"></span> 一线资深工程是打造</p>
					<p><span class="glyphicon glyphicon-grain mai-icon"></span> 一线资深工程是打造</p>
				</div>
				<div class="col-md-6">
					<img src="img/html5.jpg" class="img-responsive" alt=""/>
				</div>
			</div>
			
		</div>
		
	</section>
	<!--	html5 -->
	
	<!--	bootstrap-->
	<section id="bootstrap">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<img src="img/Bootstrap.jpg" class="img-responsive" alt=""/>
				</div>
				<div class="col-md-6">
					<h2>Bootstrap</h2>
					<p>一线资深工程是打造</p>
					<p><span class="glyphicon glyphicon-grain mai-icon"></span> 一线资深工程是打造</p>
					<p><span class="glyphicon glyphicon-grain mai-icon"></span> 一线资深工程是打造</p>
				</div>
			</div>
			
		</div>
		
	</section>
	<!--	bootstrap-->
	
	<!--	最新课程-->
	<section id="course">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<h2>最新课程</h2>
				</div>
			</div>
			
			<div class="row">
				<div class="col-md-3">
					<img src="img/swift.jpg" class="img-responsive" align=""/>
					<button>立即学习</button>
				</div>
				<div class="col-md-3">
					<img src="img/swift.jpg" class="img-responsive" align=""/>
					<button>立即学习</button>
				</div>
				<div class="col-md-3">
					<img src="img/swift.jpg" class="img-responsive" align=""/>
					<button>立即学习</button>
				</div>
				<div class="col-md-3">
					<img src="img/swift.jpg" class="img-responsive" align=""/>
					<button>立即学习</button>
				</div>
			</div>
			
			<div class="row">
				<div class="col-md-3">
					<img src="img/swift.jpg" class="img-responsive" align=""/>
					<button>立即学习</button>
				</div>
				<div class="col-md-3">
					<img src="img/swift.jpg" class="img-responsive" align=""/>
					<button>立即学习</button>
				</div>
				<div class="col-md-3">
					<img src="img/swift.jpg" class="img-responsive" align=""/>
					<button>立即学习</button>
				</div>
				<div class="col-md-3">
					<img src="img/swift.jpg" class="img-responsive" align=""/>
					<button>立即学习</button>
				</div>
			</div>
		</div>
	</section>
	<!--	最新课程-->
	
	<!--	app-->
	<section id="app">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<h1>麦子学院app下载</h1>
					<p>这是应用描述</p>
					<button type="button" class="btn btn-primary btn-group-lg" >安卓下载</button>
					<button type="button" class="btn btn-primary btn-group-lg" >苹果下载</button>
				</div>
				<div class="col-md-6">
					<img src="img/app-banner.jpg" class="img-responsive"/>
				</div>
			</div>
			
		</div>
	</section>
	<!--	app-->
	
	<!--	联系我们-->
	<section id="contact">
		<div class="lvjing">
			<div class="container">
				<div class="row">
					<div class="col-md-6">
						<h2>联系小麦</h2>
						<p>说明</p>
						<address>
							<p>联系地址</p>
							<p>联系电话</p>
							<p>联系邮箱</p>
						</address>
					</div>
					<div class="col-md-6">
						<form action="#" method="post">
							<div class="col-md-6">
								<input type="text"  class="form-control" placeholder="您的姓名"/>
							</div>
							<div class="col-md-6">
								<input type="text"  class="form-control" placeholder="您的电话"/>
							</div>
							
							<div class="col-md-12">
								<input type="text"  class="form-control" placeholder="标题"/>
							</div>
					
							<div class="col-md-12">
								<textarea placeholder="留言内容" class="form-control" rows=4></textarea>
							</div>
							
							<div class="col-md-8">
								<input type="submit"class="form-control" ></input>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!--	联系我们-->
	
	<!--	footer-->
	<footer>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<p>内容</p>
				</div>
			</div>
			
		</div>
	</footer>
	
	<!--	footer-->



    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!--解决导航的问题-->
   	<script src="js/jquery.singlePageNav.min.js" type="text/javascript" charset="utf-8"></script>
   	<!--与animation共用-->
   	<script src="js/wow.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    
    <script type="text/javascript">
    	$(function() {
    		$("nav").singlePageNav({
    			offset:70
    		});
    		
    		// 小屏幕，点击菜单折叠(收缩下拉菜单)
    		$(".navbar-collapse a").on("click",function() {
    			$(".navbar-collapse").collapse("hide");
    		});
    		
    		// 初始化动画
    		new WOW().init();
    	})
    </script>
  </body>
</html>
